
// 调用函数 动态渲染生成页面内容
setPage();

// 通过事件委托 添加 点击事件
$('.container').click(function (e) {
    // 获取 localStorage 中 数据 
    let cart = JSON.parse(localStorage.cart);

    // 点击的是 全选标签 
    if ($(e.target).attr('name') === 'all') {
        // 让 localStorage 中 购买状态 和 全选标签相同
        for (let i = 0; i <= cart.length - 1; i++) {
            cart[i].buy = $(e.target).prop('checked');
        }

        // 点击的是 其他 input复选框
    } else if ($(e.target).attr('name') === 'other') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {
                // 修改 buy 属性 存储的 购买状态
                cart[i].buy = $(e.target).prop('checked');

                // break 终止循环
                break;
            }

        }


        // 点击的是 - 减按钮
    } else if ($(e.target).attr('name') === '-') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {

                // 购买数量 累减 1
                cart[i].num--;

                // break 终止循环
                break;
            }

        }

        // 点击的是 + 减按钮
    } else if ($(e.target).attr('name') === '+') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {

                // 购买数量 累加 1
                cart[i].num++;

                // break 终止循环
                break;
            }

        }

        // 点击的是 删除按钮
    } else if ($(e.target).attr('name') === 'del') {

        // 循环遍历 购物车数组 
        for (let i = 0; i <= cart.length - 1; i++) {
            // 购物车数组goods_id 和 点击标签存储的goods_id 相同 
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {

                // 删除数组中当前数据单元
                cart.splice(i, 1);

                // break 终止循环
                break;
            }

        }
    }


    // 将新的数组 设定给 localStorage.cart
    localStorage.cart = JSON.stringify(cart);

    // 根据 localStorage.cart 中的数据 再次动态渲染生成页面
    setPage();

})


function setPage() {
    // 定义变量存储数据 
    let flag = true;

    // 购买商品种类
    let type = 0;
    // 购买商品数量
    let number = 0;
    // 购买商品总价
    let pay = 0;


    // 获取 localStorage 中 购物车数据信息
    let cart = localStorage.cart;

    if (cart === undefined) {
        // 还没有创建购物车
        $('.container').html('<h1>您是第一次购物 还没有创建购物车</h1>');

    } else {
        // 购物车已经创建 将数据 转换为对应的数据结构
        cart = JSON.parse(cart);

        // 空 购物车
        if (cart.length === 0) {
            $('.container').html('<h1>您的购物车已经被老公清空了,请您继续放心大胆的购物</h1>');


            // 购物车中有数据
        } else {
            // 根据数据 动态渲染生成页面内容

            // li标签之前的内容
            let str = `
        <div class="panel panel-info ">
          <div class="panel-body bg-info">
            <div class="checkbox">
              <label>
                <input name="all" type="checkbox" value="">
                全选
              </label>
            </div>
          </div>
          <div class="panel-footer">
            <ul class="cart-list">
      
      `;

            // 通过 循环遍历 生成 li标签
            cart.forEach(function (item) {
                if (item.buy === false) {
                    // 如果有商品的购买状态是false 也就是不购买
                    // 给 变量 赋值 false
                    flag = false;

                } else {
                    // 商量购买状态是 true 再计算购买信息
                    // 购买种类 累加 1
                    type++;
                    // 购买数量 累加 商品的购买数量
                    number += item.num;
                    // 购买总价 累加 购买数量*单价
                    pay += item.num * item.goods_price;
                }

                str += `
          <li class="cart-item">
            <div class="left">
              <input name="other" goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
            </div>
            <div class="right">
              <div class="media">
                <div class="media-left">
                  <a href="#">
                    <img class="media-object" src="${item.goods_small_logo}" alt="...">
                  </a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">${item.goods_name}</h4>
                  <p>
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>${item.goods_price}</span>
                  </p>
                  <div class="btn-group pull-right" role="group" aria-label="...">
                    <button name="-" goods_id=${item.goods_id} type="button" class="btn btn-default" ${item.num === 1 ? 'disabled' : ''}>-</button>
                    <button type="button" class="btn btn-default" disabled>${item.num}</button>
                    <button name="+" goods_id=${item.goods_id} type="button" class="btn btn-default" ${item.num === Number(item.goods_number) ? 'disabled' : ''}>+</button>
                  </div>
                  <button name="del" goods_id=${item.goods_id} class="del btn btn-danger">我不要了</button>

                </div>
              </div>
            </div>
          </li>
        
        `;
            });

            // li标签之后的内容
                  // <h1>您一共购买${type}种商品</h1>
              // <h1>您一共购买${number}件商品</h1>
              // <h1>您一共需要支付${pay.toFixed(2)}元</h1>
            str += `
          </ul>
            <div class="bottom">
        
            
              <p>合计:${pay.toFixed(2)}元&emsp;共${type}款&emsp;${number}件商品</p>
              <a href="#">结算</a>

            </div>
          </div>
        </div>
      `;

            // 将 内容 写入 标签中
            $('.container').html(str);
        }

        // 根据 每一个 商品的购买状态 决定 全选标签的选中状态
        $('[name="all"]').prop('checked', flag);

    }
}

/*
  动态生成购物车页面
    获取 localStorage 中 购物车数据信息

      购物车还没有创建
        生成 没有创建购物车对应的页面

      购物车已经创建 
        空数组
          生成 空购物车对应的页面

        不是空数组
          根据 购物车数据生成对应的页面

          根据 数组中数据单元的个数 循环遍历 生成 li标签 
          其他内容 也就是 li标签之前 li标签之后的内容 不参与 循环遍历

  点击事件 
    使用 事件委托 完成点击事件

      点击 全选按钮
        循环遍历 购物车数组 
        将 每一个 数据单元 buy 属性 定义成 全选按钮 checked 属性值

      点击 其他input复选框
        循环遍历 购物车数组 
          如果 点击标签存储的goods_id 和 购物车商品goods_id 相同
            将 这个购物车商品的buy 设定 为 点击标签checked属性值
            使用 break 终止循环

      点击 - 按钮 
        循环遍历 购物车数组 
          如果 点击标签存储的goods_id 和 购物车商品goods_id 相同
            将 这个购物车商品的num 累减1 
            使用 break 终止循环
            
          如果 购买数量num 为 1 禁用 - 按钮

      点击 + 按钮 
        循环遍历 购物车数组 
          如果 点击标签存储的goods_id 和 购物车商品goods_id 相同
            将 这个购物车商品的num 累加1 
            使用 break 终止循环 

          如果 购买数量num 为 库存数值 禁用 + 按钮

      点击 我不要了 按钮 
        循环遍历 购物车数组 
          如果 点击标签存储的goods_id 和 购物车商品goods_id 相同
            将 这个购物车商品 从 购物车数组中 删除
            使用 break 终止循环 
      
      将 新的 购物车数组 设定给 localStorage 

      根据 新的 localStorage 再次动态渲染 生成 新的页面内容

*/
